<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-练习</title>
    <style>
        *{margin: 0; padding: 0;}
        .singer-container{
            width: 1000px;
            margin: 0 auto;
        }
        hr{
            margin: 15px 0 ;
        }

        .item{
            width: 20%;
            float: left;
            padding: 0 20px 10px;
            box-sizing: border-box;
        }

        .item img{
            border-radius: 50%;
            width: 100%;
        }

        .item p{
            text-align:center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .singer-list{
            margin: 0 -20px;
        }
        
    </style>
</head>

<body>
    <div id="root">
        
    </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //准备数据
        let singers = [
            {
                "country": "",
                "singer_id": 4558,
                "singer_mid": "0025NhlN2yWrP4",
                "singer_name": "周杰伦",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.webp"
            },
            {
                "country": "",
                "singer_id": 6016498,
                "singer_mid": "002YetSZ06c9c9",
                "singer_name": "王靖雯不胖",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002YetSZ06c9c9.webp"
            },
            {
                "country": "",
                "singer_id": 29858,
                "singer_mid": "00067r4p0wBDDN",
                "singer_name": "任然",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M00000067r4p0wBDDN.webp"
            },
            {
                "country": "",
                "singer_id": 60505,
                "singer_mid": "000aHmbL2aPXWH",
                "singer_name": "李荣浩",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000aHmbL2aPXWH.webp"
            },
            {
                "country": "",
                "singer_id": 4286,
                "singer_mid": "001BLpXF2DyJe2",
                "singer_name": "林俊杰",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001BLpXF2DyJe2.webp"
            },
            {
                "country": "",
                "singer_id": 4246,
                "singer_mid": "003iPzNg35cWzp",
                "singer_name": "程响",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003iPzNg35cWzp.webp"
            },
            {
                "country": "",
                "singer_id": 7221,
                "singer_mid": "000CK5xN3yZDJt",
                "singer_name": "许嵩",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000CK5xN3yZDJt.webp"
            },
            {
                "country": "",
                "singer_id": 13948,
                "singer_mid": "001fNHEf1SFEFN",
                "singer_name": "G.E.M. 邓紫棋",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001fNHEf1SFEFN.webp"
            },
            {
                "country": "",
                "singer_id": 5062,
                "singer_mid": "002J4UUk29y8BY",
                "singer_name": "薛之谦",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002J4UUk29y8BY.webp"
            },
            {
                "country": "",
                "singer_id": 199509,
                "singer_mid": "003fA5G40k6hKc",
                "singer_name": "周深",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003fA5G40k6hKc.webp"
            },
            {
                "country": "",
                "singer_id": 143,
                "singer_mid": "003Nz2So3XXYek",
                "singer_name": "陈奕迅",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003Nz2So3XXYek.webp"
            },
            {
                "country": "",
                "singer_id": 963482,
                "singer_mid": "004GZcGF2ZgJYo",
                "singer_name": "白小白",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004GZcGF2ZgJYo.webp"
            },
            {
                "country": "",
                "singer_id": 11455,
                "singer_mid": "004PjYVG2cjyBK",
                "singer_name": "张远",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004PjYVG2cjyBK.webp"
            },
            {
                "country": "",
                "singer_id": 2907567,
                "singer_mid": "001B2drs3Jq4EX",
                "singer_name": "等什么君",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001B2drs3Jq4EX.webp"
            },
            {
                "country": "",
                "singer_id": 4674,
                "singer_mid": "003x77MM2iIg6c",
                "singer_name": "刘惜君",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003x77MM2iIg6c.webp"
            },
            {
                "country": "",
                "singer_id": 1012042,
                "singer_mid": "000oCQfT3kdonw",
                "singer_name": "黄霄雲",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000oCQfT3kdonw.webp"
            },
            {
                "country": "",
                "singer_id": 1507534,
                "singer_mid": "001BHDR33FZVZ0",
                "singer_name": "毛不易",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001BHDR33FZVZ0.webp"
            },
            {
                "country": "",
                "singer_id": 4615,
                "singer_mid": "002ZOuVm3Qn20Y",
                "singer_name": "李宇春",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002ZOuVm3Qn20Y.webp"
            },
            {
                "country": "",
                "singer_id": 13581,
                "singer_mid": "000zjDPE2odFUD",
                "singer_name": "陈雅森",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000zjDPE2odFUD.webp"
            },
            {
                "country": "",
                "singer_id": 187111,
                "singer_mid": "001r6H560AOJMq",
                "singer_name": "花僮",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001r6H560AOJMq.webp"
            },
            {
                "country": "",
                "singer_id": 4553007,
                "singer_mid": "0039JTTG0s4SCv",
                "singer_name": "时代少年团",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000039JTTG0s4SCv.webp"
            },
            {
                "country": "",
                "singer_id": 51313,
                "singer_mid": "002YZsgF2rNFZL",
                "singer_name": "DJ小鱼儿",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002YZsgF2rNFZL.webp"
            },
            {
                "country": "",
                "singer_id": 74,
                "singer_mid": "000Sp0Bz4JXH0o",
                "singer_name": "五月天",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000Sp0Bz4JXH0o.webp"
            },
            {
                "country": "",
                "singer_id": 1509135,
                "singer_mid": "003Xf2W10FZgVW",
                "singer_name": "Lil Ghost小鬼",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003Xf2W10FZgVW.webp"
            },
            {
                "country": "",
                "singer_id": 1190986,
                "singer_mid": "003DBAjk2MMfhR",
                "singer_name": "BLACKPINK",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003DBAjk2MMfhR.webp"
            },
            {
                "country": "",
                "singer_id": 2,
                "singer_mid": "002pUZT93gF4Cu",
                "singer_name": "BEYOND",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002pUZT93gF4Cu.webp"
            },
            {
                "country": "",
                "singer_id": 3954,
                "singer_mid": "001z2JmX09LLgL",
                "singer_name": "汪苏泷",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001z2JmX09LLgL.webp"
            },
            {
                "country": "",
                "singer_id": 174,
                "singer_mid": "004Be55m1SJaLk",
                "singer_name": "张学友",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004Be55m1SJaLk.webp"
            },
            {
                "country": "",
                "singer_id": 200521,
                "singer_mid": "0022bqqN3dRfN4",
                "singer_name": "周兴哲",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000022bqqN3dRfN4.webp"
            },
            {
                "country": "",
                "singer_id": 199515,
                "singer_mid": "0003ZpE43ypssl",
                "singer_name": "张碧晨",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000003ZpE43ypssl.webp"
            },
            {
                "country": "",
                "singer_id": 944940,
                "singer_mid": "0020PeOh4ZaCw1",
                "singer_name": "Alan Walker (艾兰·沃克)",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000020PeOh4ZaCw1.webp"
            },
            {
                "country": "",
                "singer_id": 265,
                "singer_mid": "001JDzPT3JdvqK",
                "singer_name": "王力宏",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001JDzPT3JdvqK.webp"
            },
            {
                "country": "",
                "singer_id": 40449,
                "singer_mid": "001Lr98T0yEWAk",
                "singer_name": "赵雷",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001Lr98T0yEWAk.webp"
            },
            {
                "country": "",
                "singer_id": 224,
                "singer_mid": "002raUWw3PXdkT",
                "singer_name": "张韶涵",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002raUWw3PXdkT.webp"
            },
            {
                "country": "",
                "singer_id": 1103924,
                "singer_mid": "001ZVMXf3ZYVX7",
                "singer_name": "曲肖冰",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001ZVMXf3ZYVX7.webp"
            },
            {
                "country": "",
                "singer_id": 89698,
                "singer_mid": "003Cn3Yh16q1MO",
                "singer_name": "庄心妍",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003Cn3Yh16q1MO.webp"
            },
            {
                "country": "",
                "singer_id": 2174230,
                "singer_mid": "002ug9Ha2zYM1y",
                "singer_name": "单依纯",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002ug9Ha2zYM1y.webp"
            },
            {
                "country": "",
                "singer_id": 43665,
                "singer_mid": "004dr7ZS36C2B1",
                "singer_name": "梦然",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004dr7ZS36C2B1.webp"
            },
            {
                "country": "",
                "singer_id": 2241311,
                "singer_mid": "001Iu4Dv1NzRCD",
                "singer_name": "摩登兄弟刘宇宁",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001Iu4Dv1NzRCD.webp"
            },
            {
                "country": "",
                "singer_id": 4199,
                "singer_mid": "001TgcTp2jHGOR",
                "singer_name": "蒋雪儿",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001TgcTp2jHGOR.webp"
            },
            {
                "country": "",
                "singer_id": 54,
                "singer_mid": "000cISVf2QqLc6",
                "singer_name": "莫文蔚",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000cISVf2QqLc6.webp"
            },
            {
                "country": "",
                "singer_id": 167,
                "singer_mid": "0000mFvh1jtLcz",
                "singer_name": "张信哲",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000000mFvh1jtLcz.webp"
            },
            {
                "country": "",
                "singer_id": 51,
                "singer_mid": "003jJGvv3C82KZ",
                "singer_name": "刘若英",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003jJGvv3C82KZ.webp"
            },
            {
                "country": "",
                "singer_id": 109,
                "singer_mid": "001pWERg3vFgg8",
                "singer_name": "孙燕姿",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001pWERg3vFgg8.webp"
            },
            {
                "country": "",
                "singer_id": 6499,
                "singer_mid": "002azErJ0UcDN6",
                "singer_name": "张杰",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002azErJ0UcDN6.webp"
            },
            {
                "country": "",
                "singer_id": 227,
                "singer_mid": "0027pdHE4STooO",
                "singer_name": "蔡依林",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000027pdHE4STooO.webp"
            },
            {
                "country": "",
                "singer_id": 173914,
                "singer_mid": "003AD17D4PYPFR",
                "singer_name": "Vicetone",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003AD17D4PYPFR.webp"
            },
            {
                "country": "",
                "singer_id": 163,
                "singer_mid": "003aQYLo2x8izP",
                "singer_name": "刘德华",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003aQYLo2x8izP.webp"
            },
            {
                "country": "",
                "singer_id": 4365,
                "singer_mid": "004NMZuf2BLjg8",
                "singer_name": "周传雄",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004NMZuf2BLjg8.webp"
            },
            {
                "country": "",
                "singer_id": 87,
                "singer_mid": "0001v4XU1cZxPy",
                "singer_name": "张国荣",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000001v4XU1cZxPy.webp"
            },
            {
                "country": "",
                "singer_id": 1288409,
                "singer_mid": "002vALgR3hRRlv",
                "singer_name": "音阙诗听",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002vALgR3hRRlv.webp"
            },
            {
                "country": "",
                "singer_id": 11608,
                "singer_mid": "003tMm0y0TuewY",
                "singer_name": "杨宗纬",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003tMm0y0TuewY.webp"
            },
            {
                "country": "",
                "singer_id": 61620,
                "singer_mid": "004KKLWZ4320g1",
                "singer_name": "宋冬野",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004KKLWZ4320g1.webp"
            },
            {
                "country": "",
                "singer_id": 11606,
                "singer_mid": "001f0VyZ1hmWZ1",
                "singer_name": "林宥嘉",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001f0VyZ1hmWZ1.webp"
            },
            {
                "country": "",
                "singer_id": 940748,
                "singer_mid": "004WgCsE3KBddt",
                "singer_name": "陈粒",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004WgCsE3KBddt.webp"
            },
            {
                "country": "",
                "singer_id": 11733,
                "singer_mid": "004AlfUb0cVkN1",
                "singer_name": "BIGBANG (빅뱅)",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004AlfUb0cVkN1.webp"
            },
            {
                "country": "",
                "singer_id": 11921,
                "singer_mid": "000qrPik2w6lDr",
                "singer_name": "Taylor Swift (泰勒·斯威夫特)",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000qrPik2w6lDr.webp"
            },
            {
                "country": "",
                "singer_id": 4607,
                "singer_mid": "000aw4WC2EQYTv",
                "singer_name": "张靓颖",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000aw4WC2EQYTv.webp"
            },
            {
                "country": "",
                "singer_id": 4418,
                "singer_mid": "0002ankM4d5yZI",
                "singer_name": "郭顶",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000002ankM4d5yZI.webp"
            },
            {
                "country": "",
                "singer_id": 358,
                "singer_mid": "001a5w162IXjyZ",
                "singer_name": "李巍V仔",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000001a5w162IXjyZ.webp"
            },
            {
                "country": "",
                "singer_id": 44,
                "singer_mid": "000GGDys0yA0Nk",
                "singer_name": "梁静茹",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000GGDys0yA0Nk.webp"
            },
            {
                "country": "",
                "singer_id": 171,
                "singer_mid": "000xogLP35ayzS",
                "singer_name": "杨千嬅",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000xogLP35ayzS.webp"
            },
            {
                "country": "",
                "singer_id": 244,
                "singer_mid": "000iZroE1VWLJG",
                "singer_name": "刀郎",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000iZroE1VWLJG.webp"
            },
            {
                "country": "",
                "singer_id": 6154,
                "singer_mid": "0022DRSx1GZbbS",
                "singer_name": "金池",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000022DRSx1GZbbS.webp"
            },
            {
                "country": "",
                "singer_id": 235,
                "singer_mid": "003nS2v740Lxcw",
                "singer_name": "李克勤",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003nS2v740Lxcw.webp"
            },
            {
                "country": "",
                "singer_id": 42,
                "singer_mid": "002UGAkU4ZDoTZ",
                "singer_name": "李宗盛",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002UGAkU4ZDoTZ.webp"
            },
            {
                "country": "",
                "singer_id": 7015,
                "singer_mid": "004ItgA32BhfdC",
                "singer_name": "Sia (希雅)",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004ItgA32BhfdC.webp"
            },
            {
                "country": "",
                "singer_id": 112,
                "singer_mid": "000hNnWC3kko2c",
                "singer_name": "蔡健雅",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000hNnWC3kko2c.webp"
            },
            {
                "country": "",
                "singer_id": 1327483,
                "singer_mid": "000985uR2CKS2P",
                "singer_name": "艾辰",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000985uR2CKS2P.webp"
            },
            {
                "country": "",
                "singer_id": 2079450,
                "singer_mid": "000wHoyF0OZB6B",
                "singer_name": "胡66",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000wHoyF0OZB6B.webp"
            },
            {
                "country": "",
                "singer_id": 264,
                "singer_mid": "000GDDuQ3sGQiT",
                "singer_name": "王菲",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000GDDuQ3sGQiT.webp"
            },
            {
                "country": "",
                "singer_id": 163550,
                "singer_mid": "002Vcz8F2hpBQj",
                "singer_name": "华晨宇",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002Vcz8F2hpBQj.webp"
            },
            {
                "country": "",
                "singer_id": 159,
                "singer_mid": "0022VU5J1D8BRP",
                "singer_name": "胡彦斌",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000022VU5J1D8BRP.webp"
            },
            {
                "country": "",
                "singer_id": 39657,
                "singer_mid": "000LsFo136kIv4",
                "singer_name": "魏新雨",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000000LsFo136kIv4.webp"
            },
            {
                "country": "",
                "singer_id": 3376,
                "singer_mid": "00235pCx2tYjlq",
                "singer_name": "许巍",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M00000235pCx2tYjlq.webp"
            },
            {
                "country": "",
                "singer_id": 1016794,
                "singer_mid": "002nXp292LIOGV",
                "singer_name": "蔡徐坤",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000002nXp292LIOGV.webp"
            },
            {
                "country": "",
                "singer_id": 168,
                "singer_mid": "0044wQXL0ElWF1",
                "singer_name": "张宇",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M0000044wQXL0ElWF1.webp"
            },
            {
                "country": "",
                "singer_id": 156095,
                "singer_mid": "004ABIFV1EZUAj",
                "singer_name": "The Chainsmokers",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000004ABIFV1EZUAj.webp"
            },
            {
                "country": "",
                "singer_id": 166138,
                "singer_mid": "003OCqM82pxx6F",
                "singer_name": "张哲瀚",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003OCqM82pxx6F.webp"
            },
            {
                "country": "",
                "singer_id": 96,
                "singer_mid": "003NThQh3ujqIo",
                "singer_name": "周华健",
                "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R300x300M000003NThQh3ujqIo.webp"
            }
        ];
            
        //创建虚拟 DOM 对象
        let vDOM = <div className="singer-container">
            <h2>歌手列表</h2>
            <hr />
            <div className="singer-list">
                {
                    singers.map(item => {
                        return <div className="item" key={item.singer_id}>
                                    <a target="_blank" href={"https://y.qq.com/n/ryqq/singer/" + item.singer_mid}><img src={item.singer_pic} alt="" /></a>
                                    <p title={item.singer_name}>{item.singer_name}</p>
                                </div>
                    })
                }
            </div>
        </div>;

        //渲染
        ReactDOM.render(vDOM, document.querySelector("#root"));

    </script>
</body>

</html>